<template>
  <div class="wholesongsheet">
	<div class="wholesongsheet-top">
		<div class="wholesongsheet-top-left">
			<div>
				<img  src="../../assets/img/1.jpg"/>
			</div>
		</div>
		<div class="wholesongsheet-top-right">
			<p><i class="">32</i> 精品歌单</p>
			<p>小问号小问号小问号小问号小问号</p>
			<p>小问号小问号小问号小问号小问号</p>
		</div>
	</div>
	<div class="wholesongsheet-tatle">
		<div class="wholesongsheet-tatle-left">
			
		</div>
		<div class="wholesongsheet-tatle-right">
			<ul>
				<li v-for="(item,index) in playlist" :key="index" @click="liclick(item.name)">{{item.name}}</li>
			</ul>
		</div>
	</div>
	<div class="wholesongsheet-tatle-main">
		<div class="wholesongsheet-tatle-main-song" v-for="(item,index) in list" :key="index">
			<img v-lazy="item.coverImgUrl" @click="playlistDetail(item.id)"/>
			<span style="position: absolute;top: 2px;right: 9px;color: #FFFFFF;font-size: 12px;">{{item.playCount | playCountw}}</span>
			<p>{{item.name}}</p>
		</div>
	</div>
	<div class="paging">
		<Page :total="100" show-elevator />
	</div>
  </div>
</template>
<script>
export default{
  data () {
    return {
		playlist: [],
		list:[]
    }
  },
  components: {

  },
  methods: {
	  liclick(name){                      //歌曲风格
	  console.log(name)
		  this.$api.topplaylist({
			  cat:name
		  }).then(res=>{
		  	this.list = res.playlists;
		  	console.log(res)
		  })
	  },
	  playlistDetail(id) {                  //获取歌单详情跳转
	  	this.$api.playlist_detail({
	  		id: id
	  	}).then(res => {
	  		this.$router.push({path:'/songsheet',query:{data:res}})
	  	})
	  },
	playlistHot(){                        //歌单分类
		this.$api.playlist_hot().then(res=>{
			this.playlist = res.tags;
			console.log(res)
		})
	},
	Personalized(){                      //歌单
		this.$api.topplaylist().then(res=>{
			this.list = res.playlists;
			console.log(res)
		})
	}
  },
  mounted() {
  	this.playlistHot();
	this.Personalized();
  },
  filters: {
  	playCountw(e) {
  		return Math.ceil(e / 10000) + '万';
  	}
  }
}
</script>

<style scoped="scoped">
	.wholesongsheet{
		width: 100%;
		padding: 10px;
	}
	.wholesongsheet-top{
		padding: 15px;
		display: flex;
		width: 100%;
		height: 230px;
		border-radius: 10px;
	}
	.wholesongsheet-top-left{
		width: 200px;
		height: 200px;
	}
	.wholesongsheet-top-left img{
		width: 200px;
		height: 200px;
		border-radius: 10px;
	}
	.wholesongsheet-top-right{
		margin-left: 20px;
		padding-left: 30px;
		border-radius: 20px;
		background: #1e130c;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #9a8478, #1e130c);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #9a8478, #1e130c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		width: 100%;
	}
	.wholesongsheet-top-right p:nth-child(1){
		width: 130px;
		border-radius: 30px;
		margin-top: 35px;
		text-align: center;
		border: 1px solid #000000;
		padding: 6px 0; 
	}
	.wholesongsheet-top-right p:nth-child(2){
		font-size: 18px;
		margin-top: 25px;
		color: #FFFFFF;
	}
	.wholesongsheet-top-right p:nth-child(3){
		font-size: 15px;
		margin-top: 10px;
		color: #D9D9D9;
	}
	.wholesongsheet-tatle{
		display: flex;
		height: 30px;
		width: 100%;
	}
	.wholesongsheet-tatle-left{
		flex: 1;
	}
	.wholesongsheet-tatle-right{
		flex: 2;
	}
	.wholesongsheet-tatle-right ul{
		display: flex;
		justify-content: flex-end;
	}
	.wholesongsheet-tatle-right ul li{
		list-style: none;
		min-width: 30px;
		margin: 0 10px;
		font-size: 13px;
		cursor: pointer;
	}
	.wholesongsheet-tatle-right ul li:hover{
		color: #999999;
	}
	.wholesongsheet-tatle-main{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-right: -10px;
	}
	.wholesongsheet-tatle-main-song{
		position: relative;
		width: 188px;
		margin: 10px;
	}
	.wholesongsheet-tatle-main-song img{
		width: 188px;
		height: 188px;
		cursor: pointer;
		border-radius: 10px;
	}
	.wholesongsheet-tatle-main-song p{
		height: 40px;
		width: 100%;
	}
	.paging{
		height: 50px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	>>> .ivu-page-item-active{
		background-color: red;
		border-color: #FFFFFF!important;
	}
	>>> .ivu-page-item-active a{
		color: #FFFFFF;
	}
</style>
